<!-- 头部导航栏 -->
<template>
  <div class="headernavcontent">
    <ul class="leftUl" @mouseenter="ulMouseenter" @mouseleave="ulMouseleave">
      <li @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a class="headerNavA" href="#"><span>小米手机</span></a>
        <div class="headerNavChild">
          <ul class="childrenList">
            <li>
              <a href="#"
                ><img
                  class="childImg first"
                  src="@/assets/img/picture/headerNavXiaomi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price"> 1999起</span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavXiaomi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavXiaomi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavXiaomi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavXiaomi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavXiaomi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title"> 小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
          </ul>
        </div>
      </li>
      <li @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a class="headerNavA" href="#"><span>Redmi手机</span></a>
        <div class="headerNavChild">
          <ul class="childrenList">
            <li>
              <a href="#"
                ><img
                  class="childImg first"
                  src="@/assets/img/picture/headerNavRedmi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price"> 1999起</span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRedmi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRedmi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRedmi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRedmi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRedmi.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title"> 小米手机</span
                ><span class="price">1999起 </span></a
              >
            </li>
          </ul>
        </div>
      </li>
      <li @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a class="headerNavA" href="#"><span>电视</span></a>
        <div class="headerNavChild">
          <ul class="childrenList">
            <li>
              <a href="#"
                ><img
                  class="childImg first"
                  src="@/assets/img/picture/headerNavTV.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">红米手机</span
                ><span class="price"> 999起</span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavTV.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">红米手机</span
                ><span class="price">999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavTV.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">红米手机</span
                ><span class="price">999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavTV.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">红米手机</span
                ><span class="price">999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavTV.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">红米手机</span
                ><span class="price">999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavTV.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title"> 红米手机</span
                ><span class="price">999起 </span></a
              >
            </li>
          </ul>
        </div>
      </li>
      <li @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a class="headerNavA" href="#"><span>笔记本</span></a>
        <div class="headerNavChild">
          <ul class="childrenList">
            <li>
              <a href="#"
                ><img
                  class="childImg first"
                  src="@/assets/img/picture/headerNavComputer.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米电脑</span
                ><span class="price"> 2999起</span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavComputer.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米电脑</span
                ><span class="price">2999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavComputer.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米电脑</span
                ><span class="price">2999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavComputer.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米电脑</span
                ><span class="price">2999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavComputer.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米电脑</span
                ><span class="price">2999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavComputer.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title"> 小米电脑</span
                ><span class="price">2999起 </span></a
              >
            </li>
          </ul>
        </div>
      </li>
      <li @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a class="headerNavA" href="#"><span>家电</span></a>
        <div class="headerNavChild">
          <ul class="childrenList">
            <li>
              <a href="#"
                ><img
                  class="childImg first"
                  src="@/assets/img/picture/headerNavHome.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">小米手机</span
                ><span class="price"> 1999起</span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavHome.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">米家</span
                ><span class="price">99起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavHome.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">米家</span
                ><span class="price">99起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavHome.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">米家</span
                ><span class="price">99起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavHome.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">米家</span
                ><span class="price">99起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavHome.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title"> 米家</span
                ><span class="price">99起 </span></a
              >
            </li>
          </ul>
        </div>
      </li>
      <li @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a class="headerNavA" href="#"><span>路由器</span></a>
        <div class="headerNavChild">
          <ul class="childrenList">
            <li>
              <a href="#"
                ><img
                  class="childImg first"
                  src="@/assets/img/picture/headerNavRouter.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">路由器</span
                ><span class="price"> 1999起</span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRouter.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">路由器</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRouter.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">路由器</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRouter.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">路由器</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRouter.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">路由器</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavRouter.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title"> 路由器</span
                ><span class="price">1999起 </span></a
              >
            </li>
          </ul>
        </div>
      </li>
      <li @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a class="headerNavA" href="#"><span>智能硬件</span></a>
        <div class="headerNavChild">
          <ul class="childrenList">
            <li>
              <a href="#"
                ><img
                  class="childImg first"
                  src="@/assets/img/picture/headerNavSmart.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">智能硬件</span
                ><span class="price"> 1999起</span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavSmart.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">智能硬件</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavSmart.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">智能硬件</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavSmart.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">智能硬件</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavSmart.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title">智能硬件</span
                ><span class="price">1999起 </span></a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  class="childImg"
                  src="@/assets/img/picture/headerNavSmart.jpg"
                  alt="顶部导航的子菜单图片"
                /><span class="title"> 智能硬件</span
                ><span class="price">1999起 </span></a
              >
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="rightUl">
      <li>
        <a class="headerNavA" href="#"><span>服务</span></a>
      </li>
      <li>
        <a class="headerNavA" href="#"><span>社区</span></a>
      </li>
    </ul>
  </div>
</template>

<script>
import headerNavSubMenuXiaomiphone from "@/components/header/header-nav-sub-menu/header-nav-sub-menu-xiaomiphone";
export default {
  data() {
    return {
      screenWidth: document.body.clientWidth,
      screeHeight: document.body.clientHeight,
      preElement: null,
      headerNavChild: null,
    };
  },
  components: {
    headerNavSubMenuXiaomiphone,
  },
  created: function () {
    console.log(1);
  },
  methods: {
    mouseenter(e) {
      console.log(document.documentElement.clientWidth);
      e.srcElement.childNodes[1].style.visibility = "visible";
      e.srcElement.childNodes[1].width = document.documentElement.clientWidth;
      e.srcElement.childNodes[1].childNodes[0].style.visibility = "visible";
    },
    mouseleave(e) {
      e.srcElement.childNodes[1].style.visibility = "hidden";
      e.srcElement.childNodes[1].childNodes[0].style.visibility = "hidden";
    },
  },

};
</script>

<style lang='less' >
.headernavcontent {
  ul {
    display: inline-block;
    height: 100px;
    .submenudiv {
      z-index: 30;
    }
    li {
      display: inline-block;
      .headerNavA {
        display: block;
        padding: 26px 10px 38px;
        span {
          font: 14px Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
            Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
        }
      }
    }
  }
  .leftUl {
    .headerNavChild {
      visibility: hidden;
      z-index: 32;
      position: absolute;
      left: 0;
      width: 100vw;
      height: 0px;
      overflow: hidden;
      background-color: #fff;
      transition: all 0.2s;
      .childrenList {
        visibility: hidden;
        display: block;
        width: 1226px;
        margin: 0 auto;
        li {
          box-sizing: border-box;
          padding: 35px 0;
          width: 204px;
          height: 201px;
          a {
            .childImg {
              padding-left: 22px;
              width: 160px;
              height: 110px;
              &:not(.first) {
                border-left: 1px solid rgb(224, 224, 224);
              }
            }
            span {
              display: block;
              text-align: center;
            }
            .title {
              margin-top: 10px;
              color: #333;
            }
            .price {
              color: rgb(255, 106, 0);
              padding-bottom: 10px;
            }
            &:hover {
              .title {
                color: #333;
              }
            }
          }
        }
      }
    }
    &:hover {
      .headerNavChild {
        // visibility: visible;
        height: 229px;
        border-top: 1px solid rgb(224, 224, 224);
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
.liElementVisible {
  visibility: visible;
}
</style>
